<template>
  <div class="pagestyle">
    <list_controller ref="zujianname" :options="state.options" :noprintDownShow="true">
      <template v-slot:opraCurdBtnlist="row">
        <span>
          <el-button class="tableFontSize" type="primary" link size="small" @click="openDetail(row.row.row)">查看
          </el-button>
        </span>
      </template>
      <template v-slot:selectNamelist> 分站历史 </template>
    </list_controller>
    <!-- 分站查看详情 -->
    <el-drawer v-model="open_detail" custom-class="detail" close-on-click-modal :modal="true">
      <template #header>
        <h4 class="mask_sub_title">
          <svg-icon class-name="search-icon" icon-class="biaotitubiao" /><span>{{ subStationInfo.stationCode }}</span>
        </h4>
      </template>
      <template #default>
        <el-row :gutter="20">
          <el-col :span="24" style="border-bottom: 1px solid rgba(0,0,0,.1);padding-bottom: 10px;margin-bottom: 10px;">
            <svg-icon style="margin: 0 4px 0 0" icon-class="anzhuangdidian" />
            {{ subStationInfo.stationPlaceName }}
          </el-col>
          <el-col :span="24" style="margin-top: 30px;">
            <el-row :gutter="20">
              <el-col :span="6" style="display: flex;align-items: center;text-align: center;justify-content: center;">
                <div class="img_box">
                  <img style="width: 60px;" :src="subStationInfo.stationImagePath" alt="" />
                  <div class="name" style="margin-top: 30px;">{{ subStationInfo.stationTypeName }}</div>
                  <div class="vision">{{ subStationInfo.stationVersion }}</div>
                </div>
              </el-col>
              <el-col :span="18">
                <el-row :gutter="20">
                  <el-col :span="8">
                    <p>输入口数量/开出口数量</p>
                    <p>
                      {{ subStationInfo.stationInNum }}/{{
                        subStationInfo.stationOutNum
                      }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>分站模式</p>
                    <p>
                      {{ subStationInfo.stationModelName }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>IP:端口</p>
                    <p>
                      {{ subStationInfo.ipAddr }}:{{ subStationInfo.ipPort }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>通道</p>
                    <p>
                      {{ subStationInfo.channelNo }}(巡检周期:10秒)
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>所在区域</p>
                    <p>
                      {{ subStationInfo.stationAreaName }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>安装时刻</p>
                    <p>
                      {{ subStationInfo.createTime }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>设备唯一编号</p>
                    <p>
                      {{ subStationInfo.identifyingNo }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>应用场景</p>
                    <p>
                      {{ subStationInfo.applicationScene }}
                    </p>
                  </el-col>
                  <el-col :span="8">
                    <p>地理位置</p>
                    <p v-if="subStationInfo.locationX">
                      {{ subStationInfo.locationX }}，{{
                        subStationInfo.locationY
                      }}，{{ subStationInfo.locationZ }}
                    </p>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="24">
            <div class="others">
              <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="其他配置" name="2">
                  <el-row :gutter="20">
                    <el-col :span="3">
                      <p>无主断电</p>
                      <p><el-switch v-model="subStationInfo.isPlaceotherBreakfalg" disabled /></p>
                    </el-col>
                    <el-col :span="3">
                      <p>瓦斯抽放</p>
                      <p><el-switch v-model="subStationInfo.isGasDrainage" disabled /></p>
                    </el-col>
                    <el-col :span="2">
                      <p>以太网</p>
                      <p><el-switch v-model="subStationInfo.isNetwork" disabled /></p>
                    </el-col>
                    <el-col :span="5">
                      <p>禁止非即插即用传感器</p>
                      <p><el-switch v-model="subStationInfo.noOldprotocolSensor" disabled /></p>
                    </el-col>
                    <el-col :span="2">
                      <p>续传</p>
                      <p><el-switch v-model="subStationInfo.continuation" disabled /></p>
                    </el-col>
                    <el-col :span="4">
                      <p>测点断线断电</p>
                      <p><el-switch v-model="subStationInfo.pointCutBroken" disabled /></p>
                    </el-col>
                    <el-col :span="5">
                      <p>RS485断电器断线断电</p>
                      <p><el-switch v-model="subStationInfo.rsBreakerState" /></p>
                    </el-col>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </div>
          </el-col>
        </el-row>
      </template>
    </el-drawer>
  </div>
</template>
<script setup>
  import list_controller from "@/components/commonCom/list_controller";
  import {
    computed,
    reactive
  } from "vue";
  import {
    table_headers
  } from "@/components/commonCom/table_headers";
  import axios from "@/utils/request";
  import usePagesStore from "@/store/modules/pages";
  import dayjs from "dayjs";
  const {
    proxy
  } = getCurrentInstance();
  const store = usePagesStore();
  components: {
    list_controller;
  }
  let state = reactive({
    tabNameData: "历史分站",
    options: {
      tableheads: computed(() => table_headers.stationEx),
      queryList: {
        dropdownUrl: "",
        querys: [{
          field: "key",
          title: "模糊搜索",
          type: "input",
          binddata: "",
          tip:'请输入分站编号或者IP、地点'
          },
          {
            field: "time",
            title: "时间范围",
            col: 8,
            type: "hisdatetimerange",
            binddata: [
              dayjs().subtract(1, "month").format("YYYY-MM-DD HH:mm:ss"),
              dayjs().format("YYYY-MM-DD HH:mm:ss"),
            ],
            typespecial: 2,
            show: false,
          },
        ],
        queryMap: new Map([]),
      },
      dataUrl: "/station/ex",
    },
  });
  const open_detail = ref(false);
  const activeName = ref("2");
  const subStationInfo = ref({});

  // 打开详情抽屉
  const openDetail = (row) => {
    open_detail.value = true;
    subStationInfo.value = row;
  };
</script>
<style scoped lang="scss">
  // 分站详情
  ::v-deep .detail {
    width: 912px !important;

    // height: 100%;
    .detail_box {
      width: 100%;
      height: 100%;

      .basic_info {
        padding: 16px;
        height: 285px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .location {
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 700;
          color: rgba(62, 70, 79, 1);
        }

        .line {
          height: 1px;
          background-color: rgba(91, 109, 128, 0.3);
        }

        .info_data {
          height: 204px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .img_box {
            width: 200px;
            height: 142px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

            .name {
              font-weight: 700;
            }

            img {
              width: 51px;
              height: 66px;
            }
          }

          .data_box {
            width: 632px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .data_row {
              display: flex;
            }

            .data_item {
              height: 36px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              color: rgba(62, 70, 79, 1);
              font-size: 14px;

              .item_title {
                color: rgba(62, 70, 79, 0.6);
              }
            }
          }
        }

        .others {
          height: 275px;
        }
      }
    }

    .footer_btns {
      display: flex;
      justify-content: space-between;
    }
  }

  .demo-tabs {
    .custom-tabs-label {
      display: flex;
      align-items: center;
    }

    .tabs_box {
      height: 220px;
    }

    .one {
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .data_row {
        display: flex;
        justify-content: space-between;
      }

      .data_item {
        width: 154px;
        height: 36px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: rgba(62, 70, 79, 1);
        font-size: 14px;

        .item_title {
          color: rgba(62, 70, 79, 0.6);
        }
      }
    }

    .two {
      display: flex;
      justify-content: space-between;

      .items {
        font-size: 14px;
        color: rgba(62, 70, 79, 0.8);
      }
    }

    .three {
      height: 300px;
      padding: 16px;
      display: flex;
      flex-direction: column;

      .three_header {
        display: flex;
        justify-content: space-between;
        color: rgba(62, 70, 79, 0.8);
        font-size: 14px;

        .header_item {
          display: flex;
          align-items: center;
        }

        .btns {
          width: 140px;
          display: flex;
          justify-content: space-between;
        }
      }

      .table {
        margin-top: 12px;
      }
    }
  }
</style>